<template>
    <div class="wrap">
      <el-collapse v-model="activeName">
        <el-collapse-item title="基本信息" name="1">
          <div class="collapse-item-container" >
            <div v-for="(item, index) in formItems.basic" class="collapse-item">
              <div class="collapse-item-label">{{item.label}}：</div>
              <div class="collapse-item-content">{{companyInfo[item.name]}}</div>
            </div>
          </div>
        </el-collapse-item>
        <el-collapse-item title="运营信息" name="2">
          <div class="collapse-item-container" >
            <div v-for="(item, index) in formItems.operative" class="collapse-item">
              <div class="collapse-item-label">{{item.label}}：</div>
              <div class="collapse-item-content">{{companyInfo[item.name]}}</div>
            </div>
          </div>
        </el-collapse-item>
        <el-collapse-item title="联系信息" name="3">
          <div class="collapse-item-container" >
            <div v-for="(item, index) in formItems.contact" class="collapse-item">
              <div class="collapse-item-label">{{item.label}}：</div>
              <div class="collapse-item-content">{{companyInfo[item.name]}}</div>
            </div>
          </div>
        </el-collapse-item>
        <el-collapse-item title="实际控制人信息" name="4">
          <div class="collapse-item-container" >
            <div v-for="(item, index) in formItems.control" class="collapse-item">
              <div class="collapse-item-label">{{item.label}}：</div>
              <div class="collapse-item-content">{{companyInfo[item.name]}}</div>
            </div>
          </div>
        </el-collapse-item>
      </el-collapse>
    </div>
</template>

<script>
  const formItems={
    basic:[
      // 企业名称
      {
        name:'title',
        label:'企业名称',
      },
      {
        name:'socailCode',
        label:'社会统一信用代码',
      },
      {
        name:'name',
        label:'法定代表人',
      },{
        name: 'establishDate',
        label:'成立日期',
      },
      // 营业年限
      {
        name: 'owereExperience',
        label:'营业年限',
      },
      // 营业期限（起止日期）
      {
        name1: 'TestDateRange1',
        label:'营业期限起'
      },
      {
        name1: 'TestDateRange2',
        label:'营业期限止'
      },
      // 注册资金（int）
      {
        name:'capital',
        label:'注册资金',
      },
      // 经营范围
      {
        name: 'scope',
        label:'经营范围'
      },
      // 营业执照（副本照片）
      // 公司网址（非必填）
      {
        name: 'homepage',
        label:'公司网址'
      }
    //企业名称
    //统一社会信用代码
    //法定代表人
    //身份证正面
    //身份证反面
    //成立日期
    //营业年限
    //营业期限
    //注册资本
    //经营范围
    //营业执照扫描件
    //公司网址
    ],
    operative:[
      {
        name:'employNum',
        label:'职工人数',
      },
      {
        name:'totalCapital',
        label: '资产总额',
      }
    ],
    contact:[
      // 联系人
      {
        name:'',
        label:'联系人姓名',
      },
      {
        name: 'fax',
        label:'企业传真',
      },
      // 通讯地址
      {
        name: 'officeAddr',
        label:'办公室地址',
      },
      // 联系电话
      // 传真
      // 通讯地址
    ],
    control:[
      // 实际控制人姓名
      {
        name:'owerName',
        label:'实际控制人姓名',
      },
      {
        name: 'owerAge',
        label:'年龄',
        type:'number',
        rule:{type:'number',required: true, min:1, message:'请输入大于0的数值'},
      },
      // 健康状况（文件）
      // 身份证（正反两面)
      // 从业时间
      {
        name: 'owerTime',
        label:'从业时间',
      },
      {
        name: 'owerExperience',
        label:'行业经验年限',
      },
      // 从业经历（300字以内）
      {
        name: 'owerCv',
        label:'从业经历',
      },
      // 年龄
      // 身份证正面
      // 身份证反面
      // 健康状况
      // 从业时间
      // 行业经验
      // 从业经历
    ]
  };
    export default {
        name: 'CompanyShow',
        data() {
            return {
              activeName: '1',
              formItems: formItems,
            }
        },
      computed:{
        companyInfo(){
            return this.$store.state.companyInfo||{};
          }
      }
    }
</script>

<style lang="stylus" scoped>
  .collapse-item-container
    display flex
    flex-direction row
    flex-wrap wrap
  .collapse-item
    font-size 16px
    width 45%
    display flex
    flex-direction row
    margin 10px
  .collapse-item-label
    display flex
    font-weight bold
    margin-left 50px
    justify-content flex-end
    width 150px
  .collapse-item-content
    display flex
    flex 1
</style>
